{% extends "form_comp_base.html" %}

{% block content %}
{% verbatim %}
<script id="message-left" type="x-tmpl-mustache">
                    <div class="col-md-11 pull-left">
                      <div class="media" style="margin:10px;">
                        <div class="media-left">
                          <strong>{{ nickname }}</strong>
                        </div>
                        <div class="media-body">
                          <div class="bg-success well-sm">
                            <h4 class="text-left" style="text-indent:1em;">
                              <small>在<strong>{{ time_update }}</strong>时写道</small>
                            </h4>
                            <h5 style="text-indent:2em;">{{ content }}</h5>
                          </div>
                        </div>
                      </div>
                    </div>
</script>
<script id="message-right" type="x-tmpl-mustache">
                    <div class="col-md-11 pull-right">
                      <div class="media" style="margin:10px;">
                        <div class="media-body">
                          <div class="bg-info well-sm">
                            <h4 class="text-right" style="padding-right:1em;">
                              <small>在<strong>{{ time_update }}</strong>时写道</small>
                            </h4>
                            <h5 class="text-right" style="padding-right:2em;">{{ content }}</h5>
                          </div>
                        </div>
                        <div class="media-right">
                          <strong>{{ nickname }}</strong>
                        </div>
                      </div>
                    </div>
</script>
{% endverbatim %}

<script type="text/javascript">
	var uuid = '{{ uuid }}';
	var time_update = 0;
	setInterval("message_pull();", 1000);

	function message_pull(){
		ajaxLoad('{{ request.META.PATH_INFO }}', {
			time_update: time_update, 
		}, 'json', function(msg){
			time_update = msg.time_update
			for(var i=0;i<msg.message_list.length;i++){
				var template = $('#message-left').html();;
				if (msg.message_list[i]['uuid'] == uuid){
					template = $('#message-right').html();
				}
				$('#message-insert').append(Mustache.render(template, msg.message_list[i]));
			}
			$('#message-end').scrollIntoView();
		});
	}
	
	// Generate 32 char random uuid
	function gen_uuid() {
		uuid = "";
		for (var i=0; i < 32; i++) {
			uuid += Math.floor(Math.random() * 16).toString(16); 
		}
	}

	function message_push(){
		if(uuid == ''){
			gen_uuid();
		}
		ajaxLoad('/message/', {
			uuid: uuid, 
			content: $("#content").val(), 
			sender: '{{ nickname }}',
			session: '{{ session }}', 
		}, 'html', function(msg){
			message_pull();
			$("#content").val("");
		});
	}
</script>

<style type="text/css">
.text-hidden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre-line;
}
</style>
<div class="container-fluid">
  <div class="row">

              <div class="col-md-8 col-md-offset-2 col-xs-12">

      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12 col-sm-12">
              <h3 class="text-center">
                <span class="glyphicon glyphicon-log-in"></span>
                欢迎加入我们的会话，<abbr title="你的当前昵称"><span id="nickname-text">{{ nickname }}</span></abbr>
              </h3>
            </div>
          </div>
        </div>
      </div>

                <div class="well well-lg" style="overflow:auto;max-height:480px;">
                  <h5 class="text-center"><small>会话开始的分界线</small></h5>
                  <div id="message-insert" class="row"></div>
                  <div id="message-end"></div>
                </div>
                {% if nickname %}
                <form method="post" action="/message/">
                  {% csrf_token %}
                  <div class="form-group">
                    <textarea id="content" placeholder="与我们进行交互" class="form-control" rows="3" autofocus></textarea>
                  </div>
                  <div class="form-group">
                    <button type="button" class="btn btn-primary btn-block" id="send-button" onclick="message_push();">
                      <span class="glyphicon glyphicon-send"></span> 
                      发送
                    </button>
                  </div>
                </form>
                {% else %}
                  <div class="form-group">
                    <a href="/nickname/" class="btn btn-danger btn-block">
                      <span class="glyphicon glyphicon-user"></span> 
                      加入对话
                    </a>
                  </div>
                {% endif %}
              </div>
    
  </div>
</div>
{% endblock %}
